@header_height:60px;
@head_nav_height:34px;
@content_height:1000px;
@main_color:#ffb72b;
@border_color:#3c83da;
@font_family:'微软雅黑';
@font: 16px bold @font_family;
@font_color:#787878;
*{
	margin:0px;
	padding:0px;
	border:0px;
}
.imgs{
	display: none;
}
.alert{
	position: absolute;
	margin-left: 40%;
	width: 20%;
	height: 50px;
	margin-top: 10%;
	border:1px solid @border_color;
	text-align: center;
	line-height: 46px;
	font-size: 18px;
	background-color: @border_color;
	opacity: 0.8;
	display: none;
}
// index.html
body{
	position: relative;
	background-color: #f0f0f0;
	text-align: center;
	font-family: @font_family;
	color:@font_color;
	header{
		width: 100%;
		border:none;
		img{
			width:100%;
			height:auto;
		}
	}
	.head_nav{
		p{
			text-align: right;
			height:@head_nav_height;
			padding-right: 10%;
			color:@font_color;
			span{
				font-size: 20px;
				font-weight: bold;
				padding-left: 5px;
			}
		}
	}
	.left_nav{
		position: absolute;
		top:@head_nav_height*2+@header_height;
		left: 5%;
		width:20%;
		ul{
			background-color: #e6e6e6;
			margin-top: 0px;
			width: 90%;
			height: 800px;
			-webkit-box-shadow:0px 3px #cfcfcf;
			box-shadow:0px 3px #cfcfcf;
			li{
				border:none;
				display: block;
				// height:60px;
				text-align: center;
				img{
					width: 100%;
					height: auto;

				}

			}
		}
	}
	.right_content{
		position: absolute;
		top:@head_nav_height*2+@header_height;
		left:35%;
		width:60%;
		height:@content_height;
		div{
			position: relative;
			#message_issue{
				margin-top: 16px;
				div{
					margin-top: 20px;
					text-align: left;
					position: relative;
					label{
						display: block;
						line-height: @head_nav_height;
					}
					textarea{
						text-indent: 25px;
						line-height: @head_nav_height;
						display: block;
						width: 80%;
						background-color: #e6e6e6;
						height: 180px;
						border-radius: 5px;
						// border-top: 1px solid #cfcfcf;
						// box-shadow: 10px 10px 5px #888888;
						outline: none;
						-webkit-box-shadow:0px 3px #cfcfcf inset;
						box-shadow:0px 3px #cfcfcf inset;

					}
					input,select{
						outline: none;
						font-family: @font_family;
						height: 42px;
						width: 20%;
						border-radius: 6px;
						margin-right: 5%;
						background-color: #e6e6e6;
						text-align: center;
						-webkit-box-shadow:0px 3px #cfcfcf;
						box-shadow:0px 3px #cfcfcf;
						color:@font_color;
					}
					button{
						background-color: #e6e6e6;
						outline: none;
					}
				}
				.imgs{
					text-align: left;
					width: 100%;
					div{
						margin-right: 5%;
						display: inline;
						img{
							width: 60px;
							height: auto;
						}
					}
					div{
						margin-right: 2%;
						display: inline;
						.img{
							line-height: 42px;
							position: relative;
						    display: inline-block;
						    background: #e6e6e6;
						    -webkit-box-shadow:0px 3px #cfcfcf;
							box-shadow:0px 3px #cfcfcf;
						    border-radius: 6px;
						    // padding: 4px 12px;
						    overflow: hidden;
						    color: @font_color;
						    width: 20%;
						    height: 42px;
						    text-decoration: none;
						    text-indent: 0;
						    font-family: @font_family;
						    // line-height: 20px;
							input{
								position: absolute;
							    left: 0;
							    top: 0;
							    height: 42px;
							    font-size: 200px;
							    width: 100%;
							    opacity: 0;
							    // display: none;
							}
						}
					}
					.img1,.img2,.img3{
						display: none;
					}
					.add{
						background-color: #f0f0f0;
						img{
							
						}
					}
				}
			}
			.message_delete{
				display: none;
				// opacity: 0px;
				position: absolute;
				right:20%;
				top:400px;
				width: 40%;
				background-color: #e6e6e6;
				border:1px solid #e6e6e6;
				-webkit-box-shadow:0px 3px #cfcfcf;
				box-shadow:0px 3px #cfcfcf;
				border-radius: 6px;
				ul{
					li{
						display:block;
						text-align: left;
						line-height: @head_nav_height;
						input{
							font:16px bold @font_family;
							color:@font_color;
							margin-left: 10px;
							background-color: #e6e6e6;
							outline-color: #cfcfcf;
							line-height: @head_nav_height;
						}
						textarea{
							font:16px bold @font_family;
							color:@font_color;
							display: block;
							width:100%;
							height:200px;
							text-indent: 25px;
							line-height: @head_nav_height;
							background-color: #e6e6e6;
							outline:none;
							border-top: 1px solid #cfcfcf;
						}
						img{
							width:40px;
							height:40px;
							border:2px solid #cfcfcf;
						}
					}
				}
			}
		}

	}
	.foot{
		position: absolute;
		top: @content_height+@head_nav_height*2+@header_height;
		width: 100%;
		height: @head_nav_height*2;
		line-height: @head_nav_height*2;
		background-color: #e6e6e6;
		p{
			text-align: center;
		}
	}
}
// data_statistics.html
.sex{
	position: relative;
	height:200px;
	text-align: center;
	#title{
		width: 20%;
		img{
			width: 100%;
			height: auto;
		}
	}
	#pie{
		position: absolute;
		// border-right: 1px solid @border_color;
		top:60px;
		left: 0px;
		height:200px;
		width: 50%;
		// border-bottom: 1px solid @border_color;
	}
	#bar{
		position: absolute;
		top: 60px;
		left: 50%;
		height: 200px;
		width:50%;
		// border-bottom: 1px solid @border_color;
	}
	#analysis{
		position: absolute;
		top:260px;
		width: 100%;
		text-align: left;
		text-indent: 25px;
		margin-top: 10px;
		font-size: 16px;
		// border-bottom: 1px solid @border_color;
	}
}
.distribution{
	position: relative;
	height: 400px;
	width: 100%;
	border: 1px solid @border_color;
}
//敏感词页面sentive_words---------------------------------------------
.sentivity{
	header{
		ul{
			position: relative;
			li{
				float: left;
				display: inline;
				width: 30%;
				height: 60px;
				margin-right: 5%;
				img{
					width: 100%;
					height: auto;
				}
			}
		}
	}
	.page_type{
		position: absolute;
		width: 100%;
		top: 30px;
		left: 0px;
		/**********敏感词增加**********/
		.add{
			width: 100%;
			position: relative;
			text-align: left;
			margin-top: 30px;
			.words_delete,.words_add{
				position: absolute;
				top: 0px;
				left:0px;
				width: 45%;
				textarea{
					outline: none;
					width: 100%;
					height:200px;
					background-color: #e6e6e6;
					text-indent: 25px;
					line-height: 30px;
					-webkit-box-shadow:0px 3px #cfcfcf inset;
					box-shadow:0px 3px #cfcfcf inset;
				}
				button{
					outline: none;
					margin-top: 10px;
					float: right;
					display: block;
					width: 20%;
					// height: 30px;
					background-color: #e6e6e6;
					border-radius: 5px;
					outline: none;
					img{
						width: 100%;
						height: auto;
					}
				}
			}
			.words_delete{
				top: 300px;
			}
			.words_display{
				position: absolute;
				top: 64px;
				left: 55%;
				width:40%;
				ul{
					display: none;
					position: relative;
					margin-bottom: 24px;
					line-height: @head_nav_height;
					li{
						position: relative;
						display: inline-block;
						text-indent: 25px;
						padding-right: 10px;
					}
					.head_li{
						text-indent: 0px;
						padding-right: 0px;
						width: 35px;
						height:35px;
						border-radius: 35px;
						background-color: #484848;
						text-align: center;
						color:#ffffff;
					}
				}
			}
		}
		.record{
			width: 100%;
			// margin-top: 60px;
			position: absolute;
			left: 0px;
			top: 60px;
			table{
				position: relative;
				width: 100%;
				text-align: center;
				broder:1px solid #cfcfcf;
				border-radius: 10px;
				-webkit-box-shadow:0px 3px #cfcfcf;
				box-shadow:0px 3px #cfcfcf;
				background-color: #e6e6e6;
				border-collapse:collapse;
				tr{
					td{
						border-bottom: 2px solid #c3c3c3;
						border-right: 2px solid #c3c3c3;	
						height:@head_nav_height;
						line-height: @head_nav_height;
						white-space:nowrap;     //强制不换行
						overflow:hidden;            //自动隐藏文字
						text-overflow: ellipsis;    //文字隐藏后添加省略号
						-o-text-overflow:ellipsis; //适用于opera浏览器			
					}
					.detail,.pass,.notpass{
						width: 12%;
						text-align: center;
						margin-top: 5px;
						button{
							outline: none;
							margin-top: 10px;
							width:90%;
							img{
								width: 100%;
								height: auto;
							}
						}
					}
					td:nth-child(5){
						border-right: none;
					}
				}
				tr:nth-child(1){
					td{
						background-color: #a1a1a1;
					}
					td:nth-child(1){
						border-top-left-radius: 5px;
					}
					td:nth-child(5){
						border-top-right-radius: 5px;
						border-right: none;
					}
				}
				tr:last-child{
					height:150px;
					border-right: none;
				}
			}
			
			.detail_content{
				position: relative;
				width: 40%;
				margin-top: 40px;
				text-align: left;
				div{
					display: none;
					margin-top: 20px;
					label{
						display: block;
						text-align: left;
						line-height: @head_nav_height;
					}
					textarea{
						text-align: inline;
						outline: none;
						width: 100%;
						height:200px;
						border-radius: 10px;
						background-color: #e6e6e6;
						text-indent: 25px;
						line-height: 30px;
						-webkit-box-shadow:0px 3px #cfcfcf inset;
						box-shadow:0px 3px #cfcfcf inset;
					}
					button{
						margin-top: 10px;
						display: inline;
					}
					ul{ 
						text-align: center;
						background-color: #e6e6e6;
						border-radius: 10px;
						-webkit-box-shadow:0px 3px #cfcfcf;
						box-shadow:0px 3px #cfcfcf;
						margin-top: 10px;
						li{
							display: block;
							text-indent: 25px;
							line-height: @head_nav_height;
							span{
								float: left;
								width: 20%;
							}
						}
					}
				}
			}
		}
	}
}

//插件页面----------------------------------------------
#plugin{
	width: 100%;
	position: relative;
	text-align: left;
	margin-top: 16px;
	div{
		margin-top: 20px;
		div{
			display: none;
			margin-right: 5%;
			img{
				width: 80px;
				height: auto;
			}
		}
		a{
			outline: none;
			margin-right: 5%;
			line-height: 42px;
			position: relative;
			display: inline-block;
			background: #e6e6e6;
			-webkit-box-shadow:0px 3px #cfcfcf;
			box-shadow:0px 3px #cfcfcf;
			border-radius: 6px;
			// padding: 4px 12px;
			overflow: hidden;
			color: @font_color;
			width: 20%;
			height: 42px;
			text-decoration: none;
			text-indent: 0;
			font-family: @font_family;
			// line-height: 20px;
			input{
				outline: none;
				position: absolute;
				left: 0;
				top: 0;
				height: 42px;
				font-size: 200px;
				width: 100%;
				opacity: 0;
			   // display: none;
			}
		}
		label{
			display: block;
			line-height: @head_nav_height;
		}
		input,select{
			outline: none;
			text-align: left;
			text-indent: 10px;
			outline: none;
			font-family: @font_family;
			height: 42px;
			width: 20%;
			border-radius: 6px;
			margin-right: 5%;
			background-color: #e6e6e6;
			-webkit-box-shadow:0px 3px #cfcfcf;
			box-shadow:0px 3px #cfcfcf;
			color:@font_color;
		}
		textarea{
			outline: none;
			width: 80%;
			height:200px;
			background-color: #e6e6e6;
			text-indent: 25px;
			line-height: 30px;
			-webkit-box-shadow:0px 3px #cfcfcf inset;
			box-shadow:0px 3px #cfcfcf inset;
		}
		button{
			background-color: #e6e6e6;
			outline: none;
		}
	}
}

/*成员管理**********************************/
.members{
	width: 100%;
	position: relative;
	text-align: left;
	table{
		position: relative;
		width: 100%;
		text-align: center;
		broder:1px solid #cfcfcf;
		border-radius: 10px;
		-webkit-box-shadow:0px 3px #cfcfcf inset;
		box-shadow:0px 3px #cfcfcf inset;
		background-color: #e6e6e6;
		border-collapse:collapse;
		tr{
			td{
				width: 20%;
				border-bottom: 2px solid #c3c3c3;
				border-right: 2px solid #c3c3c3;	
				height:@head_nav_height;
				line-height: @head_nav_height;
				white-space:nowrap;     //强制不换行
				overflow:hidden;            //自动隐藏文字
				text-overflow: ellipsis;    //文字隐藏后添加省略号
				-o-text-overflow:ellipsis; //适用于opera浏览器		
				button{
					margin-top: 10px;
					position: relative;
					margin-right: 5px;
					margin-left: 5px;
					img{
						width: 100%;
						height: auto;
					}
				}	
			}
		}
	}
	.user_detail{
		position: relative;
		margin-top: 10px;
		-webkit-box-shadow:0px 3px #cfcfcf;
		box-shadow:0px 3px #cfcfcf;
		background-color: #e6e6e6;
		ul{
			margin-top: 10px;
			margin-left: 5px;
			margin-bottom: 20px;
			li{
				display: inline-block;
				margin-right: 10%;
				line-height: @head_nav_height;
				span{
					padding-right: 20px;
				}
			}
		}
	}
	.foot_member{
		position: relative;
		margin-top: 20px;
		text-align: center;
		ul{
			li{
				display: inline;
				button{
					background-color: #f0f0f0;
				}
			}
		}
	}
}